import { Flex, Layout, Menu } from "antd";
import { useState, useEffect } from "react";
import {
  Navigate,
  Route,
  Routes,
  useLocation,
  useNavigate,
} from "react-router-dom";
import ModelPage from "../ModelPage";
import AgentPage from "../AgentPage";
import ToolPage from "../ToolPage";
import ContentPage from "../ContentPage";
import { RouterPath } from "../RouterPath";
// SVG imports as URLs instead of React components
import LogoIconUrl from "../../assets/svgs/react.svg?react";
import HomeIconUrl from "../../assets/svgs/home.svg?react";
import DashboardIconUrl from "../../assets/svgs/dashboard.svg?react";
import TutorialIconUrl from "../../assets/svgs/tutorial.svg?react";
import ApiIconUrl from "../../assets/svgs/api.svg?react";
import CopilotIconUrl from "../../assets/svgs/copilot.svg?react";
import { SingleLineEllipsisStyle } from "@/styles";

const SiderWidth = {
  COLLAPSE: 72,
  EXPAND: 250,
};
const { Sider } = Layout;

const HomePage = () => {
  const location = useLocation();
  const collapseInit = location.pathname !== RouterPath.HOME;
  console.log(collapseInit);
  const [collapse, setCollapse] = useState(collapseInit);
  const navigate = useNavigate();
  const [currentPath, setCurrentPath] = useState("unknown");

  const collapseSider = () => {
    if (location.pathname !== RouterPath.HOME) {
      setCollapse(true);
    }
  };

  const expandSider = () => {
    if (location.pathname !== RouterPath.HOME) {
      setCollapse(false);
    }
  };
  useEffect(() => {
    const paths = location.pathname.split("/");
    if (paths.length >= 2) {
      setCurrentPath(() => `/${paths[1]}`);

      if (`/${paths[1]}` === RouterPath.HOME) {
        setCollapse(false);
      } else {
        setCollapse(true);
      }
    } else {
      setCurrentPath(() => "unknown");
    }
  }, [location.pathname]);

  return (
    <Layout>
      <Sider
        width={collapse ? SiderWidth.COLLAPSE : SiderWidth.EXPAND}
        onMouseEnter={expandSider}
        onMouseLeave={collapseSider}
        style={{
          zIndex: 2,
          borderRight: "1px solid var(--border)",
        }}
      >
        <Flex
          style={{
            fontSize: 24,
            fontWeight: "bolder",
            padding: "20px 0",
            width: "100%",
            height: 92,
          }}
          justify={"center"}
        >
          <Flex style={SingleLineEllipsisStyle} align={"center"} gap={"small"}>
            <LogoIconUrl fill={"#000"} width={29} height={29} />
            {collapse ? null : "Studio"}
          </Flex>
        </Flex>
        <Menu
          defaultSelectedKeys={[RouterPath.HOME]}
          selectedKeys={[currentPath]}
          onClick={(e) => {
            switch (e.key) {
              case RouterPath.HOME:
                navigate(RouterPath.HOME);
                break;
              case RouterPath.AGENT:
                navigate(RouterPath.AGENT);
                break;
              case RouterPath.TOOL:
                navigate(RouterPath.TOOL);
                break;
              case RouterPath.MODEL:
                navigate(RouterPath.MODEL);
                break;
              case "tutorial":
              case "api":
                window.open("https://doc.agentscope.io", "_blank");
                break;
              case "github":
                window.open(
                  "https://github.com/modelscope/agentscope",
                  "_blank"
                );
                break;
              case "discord":
                // TODO
                break;
              case "dingtalk":
                // TODO
                break;
            }
          }}
          mode="inline"
          items={[
            {
              key: RouterPath.HOME,
              label: collapse ? undefined : "Home",
              icon: <HomeIconUrl width={15} height={15} />,
            },
            {
              key: RouterPath.AGENT,
              label: collapse ? undefined : "Agent",
              icon: <DashboardIconUrl width={15} height={15} />,
            },
            {
              key: RouterPath.TOOL,
              label: collapse ? undefined : "Tool",
              icon: <DashboardIconUrl width={15} height={15} />,
            },
            {
              key: RouterPath.MODEL,
              label: collapse ? undefined : "model",
              icon: <DashboardIconUrl width={15} height={15} />,
            },
          ]}
        />
      </Sider>
      <Routes>
        <Route path={RouterPath.HOME} element={<ContentPage />} />
        <Route path={`${RouterPath.AGENT}/*`} element={<AgentPage />} />
        <Route path={`${RouterPath.TOOL}/*`} element={<ToolPage />} />
        <Route path={`${RouterPath.MODEL}/*`} element={<ModelPage />} />
        <Route path="*" element={<Navigate to={RouterPath.HOME} replace />} />
      </Routes>
    </Layout>
  );
};

export default HomePage;
